<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.js"></script>
  </head>
  <body>
    <!-- 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
    定义一个v-fbind指令，和v-bind类似，但可以将其所绑定的input元素默认获取焦点 -->
    <div id="app">
      <h2>
        当前的n值是:
        <span v-text="n"></span>
      </h2>
      <h2>放大10倍后的值是<span v-big="n"></span></h2>
      <button @click="n++">n+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>

    <script>
      Vue.config.productionTip = false;
      var app = new Vue({
        el: "#app",
        data: { n: 1 },
        directives: {
          big(el, binding) {
            el.innerText = binding.value * 10;
          },
          fbind: {
            //指令与元素成功绑定时调用
            bind(el, binding) {
              el.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(el, binding) {
              el.focus();
            },
            //指令所在模板被重新解析时
            update(el, binding) {
              el.value = binding.value;
            },
          },
        },
      });
    </script>
  </body>
</html>
